<template>
  <div>
    <div class="box_1">
      <div class="box_2">
        <h4>请在下车后进行确认</h4>
        <!-- <span class="span_1">请往(地点)上车。</span> -->
        <div class="box_2-1">
          <div class="left">
            <h1>张师傅</h1>
            <span>即将送您到达目的地</span>
            <p>请您在下车后确认下车</p>
          </div>
          <img src="../../assets/quxiao.jpg" />
        </div>
        <div
          style="
            border-top: 1px Black solid;
            height: 20px;
            margin: top 10px;
            color: #f8f8f8;
          "
        ></div>

        <div class="box_3">
          <!-- <van-button tag="span" type="default">暂不取消</van-button> -->
          <!-- <van-button tag="span" type="default" @click="clickJump()"
            >取消订单</van-button
          > -->
          <van-button plain type="primary" tag="span" @click="xia"
            >确认下车</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    xia() {
      this.$emit("xiache", true);
    },
  },
};
</script>

<style lang="scss" scoped>
.box_1 {
  width: 100%;
  height: 227px;
  .box_2 {
    width: 300px;
    margin: auto;
    padding: 20px 0;
    h4 {
      text-align: center;
      padding: 10px 0;
    }
    .span_1 {
      font-size: 12px;
      color: red;
      padding: 10px 0;
    }
    .box_2-1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1 {
        padding: 5px 0;
      }
      span {
        display: block;
        padding-bottom: 10px;
        padding: 10px 0;
      }
      p {
        padding: 0 0 20px 0;
        color: red;
      }
      img {
        width: 70px;
        height: 62px;
        margin-top: -50px;
        float: right;
        margin: 0 auto;
      }
    }
    .box_3 {
      display: flex;
      justify-content: space-between;

      span {
        width: 130px;
        margin: 0 auto;
      }
    }
  }
}
</style>